<template>
  <div class="btn"><span>{{title}}</span>
    <svg viewBox="0 0 1024 1024" class="icon"><path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path><path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path></svg></div>
</template>

<script>
  // keyword=#
export default {
  props: {
    title:{
      default:'按钮'
    }
  },
}

</script>

<style type="text/css" lang="less" scoped>
    .btn{
      position: relative;
      display: flex;
      margin: 0 0 24px;
      padding-left: 40px;
      color: #323233;
      font-weight: 600;
      font-size: 28px;
      line-height: 80px;
      background: #f7f8fa;
      cursor: pointer;
      border-radius: 198px;
      transition: background .3s;
      .icon {
        position: absolute;
        top: 50%;
        right: 32px;
        width: 32px;
        height: 32px;
        margin-top: -16px;
      }
    }
</style>
